<template>
  <div class="app-container groupAdd">
    <el-form :model="baseinfo" :rules="rules" ref="formParams" label-width="120px" class="demo-formParams">
      <el-card class="margin-bottom-15">
        <el-descriptions :label-style="labelStyle" title="基本信息" :column="2" border>
          <el-descriptions-item label="组合名称">
            <div v-if="isEdit">
              <el-input v-model="baseinfo.groupName" placeholder="请输入组合名称" />
            </div>
            <div v-else>{{ baseinfo.groupName }}</div>
          </el-descriptions-item>
          <el-descriptions-item label="所属部门">
            <div v-if="isEdit">
              <treeselect v-model="baseinfo.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" style="width: 300px"/>
            </div>
            <div v-else>
              <treeselect v-model="baseinfo.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" disabled style="width: 300px"/>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            <div v-if="isEdit">
              <el-input v-model="baseinfo.bz" placeholder="请输入备注" />
            </div>
            <div v-else>{{ baseinfo.bz }}</div>
          </el-descriptions-item>
        </el-descriptions>
        <el-form-item style="text-align: center; margin-left: 0; margin-top: 35px;">
          <el-button type="primary" @click="submitForm()">{{ isEdit ? '保存' : '编辑'}}</el-button>
        </el-form-item>
      </el-card>

      <el-card class="margin-bottom-15" v-if="zhid">
        <el-descriptions class="margin-top-15" title="设备绑定" border>
          <template slot="extra">
            <el-button type="primary" size="small" @click="addDeviceBind">新增</el-button>
          </template>
        </el-descriptions>
        <el-table
          v-loading="loading"
          :data="bindDeviceList"
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column
            label="设备名称"
            prop="name"
          ></el-table-column>

          <el-table-column
            label="设备编号"
            align="center"
            prop="id"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="备注"
            align="center"
            prop="bz"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >解除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-form>

    <el-dialog
      title="绑定设备"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-select clearable v-model="bindSlaveId" placeholder="请选择需要绑定的设备" style="width:100%">
        <el-option v-for="item in deviceList" :key="item.id" :value="item.id" :label="item.name">{{item.name}}</el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bindDevice">绑 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addGroup, updateGroup, getAbleDeviceList, bindDevice, unbindDevice, getGroup } from "@/api/wrj/group";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: 'groupDetail',
  data() {
    return {
      baseinfo: {
        id: '',
        deptId: '',
        bz: '',
        groupName: ''
      },
      isEdit: true,
      rules: {
        roomProblem: [
          { required: true, message: '请输入存在的问题', trigger: 'blur' },
        ]
      },
      zhid: '', // 组合id
      dialogVisible: false,
      loading: false,
      list: [],
      deptOptions: undefined,
      bindDeviceList: [],
      deviceList: [],
      bindSlaveId: '', // 绑定设备id
    }
  },
  components: {
    Treeselect
  },
  computed: {
    params() {
      return {} || this.$route.query
    },
    labelStyle() {
      return {
        width: '20%'
      }
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.zhid = this.$route.query.id;
      this.getGroup();
    }
    this.getTreeselect();
  },
  methods: {
    // 获取组合设备基本信息
    getGroup() {
      getGroup(this.zhid).then(res => {
        // console.log(res)
        if(res.code == 200) {
          let { id, deptId, bz, groupName, deviceList } = res.data;
          this.baseinfo.id = id;
          this.zhid = id; // 防止编辑会下面的模块显隐造成影响
          this.baseinfo.deptId = deptId;
          this.baseinfo.bz = bz;
          this.baseinfo.groupName = groupName;
          this.bindDeviceList = deviceList
        }
      })
    },
    handleClose() {
      this.dialogVisible = false;
    },
    submitForm() {
      if(this.isEdit) {
        if (this.zhid) {
          updateGroup(this.baseinfo).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.getGroup();
          });
        } else {
          addGroup(this.baseinfo).then(response => {
            // console.log(response)
            this.zhid = response.data;
            this.$modal.msgSuccess("新增成功");
            window.history.replaceState({}, '', `${window.location.pathname}?id=${this.zhid}`)
            this.getGroup();
          });
        }
        this.isEdit = !this.isEdit;
      }
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    addDeviceBind() {
      this.dialogVisible = true;
      getAbleDeviceList({ deptId: this.baseinfo.deptId }).then(res => {
        // console.log(res)
        if(res.code == 200) {
          this.deviceList = res.data;
        }
      })
    },
    // 绑定组合设备
    bindDevice() {
      bindDevice({ groupId: this.zhid, id: this.bindSlaveId }).then(res => {
        if(res.code == 200) {
          this.$message.success('绑定成功');
          this.dialogVisible = false;
          this.getGroup();
        }
        // console.log(res)
      }).catch(err => {
        console.log(err)
      })
    },
    handleDelete(row) {
      const jobIds = row.id;
      this.$modal.confirm('是否确认删除设备id"' + jobIds + '"的数据项？').then(function() {
        return unbindDevice({ id: jobIds });
      }).then(() => {
        this.getGroup();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
  }
}
</script>

<style lang="scss" scoped>
.groupAdd {
  width: 100%;

  #container {
    width: 100%;
    height: 500px;
  }

  .isEdit {
    color: rgb(64, 158, 255);
    margin-left: 20px;
    font-size: 14px;
  }

  .margin-bottom-15 {
    margin-bottom: 15px;
  }
}
</style>

<style>
  .groupAdd .vue-treeselect__control {
    border-radius: 4px !important;
  }
</style>